<template>
  <view class="wrapper">
    <u-subsection :list="indexes" :current="current" @change="changeTab" class="tab" mode="subsection"
                  fontSize="24"
                  bgColor="#f7f8f9"
                  inactiveColor="#666666"
                  :activeColor="activeColor"></u-subsection>
    <view class="nothing" v-if="list.length === 0">暂无相关信息..</view>
    <view class="item" v-else v-for="item in list" :key="item.id">
      <view class="avatar" v-if="item.user">
        <u-avatar :src="item.user.avatar" size="80" v-if="item.user.av * 1 === 0"></u-avatar>
        <u-avatar :src="baseUrl + item.user.avatar" size="80" v-else></u-avatar>
      </view>
      <view class="name">{{item.user.nickname}}</view>
      <view class="follow" @click="handleFollow(item)">{{item.status * 1 === 1 ? '已关注' : '关注'}}</view>
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import config from '../../config/config'
import base64 from '../../util/base64'

import Material from '../../api/material'
const materialModel = new Material()

export default {
  data() {
    return {
      activeColor: color.main_color,
      baseUrl: config.baseUrl,
      total: 0,
      queryList: {
        page: 0,
        pageSize: 20,
        busy: false
      },
      list: [],
      indexes: ['关注', '粉丝'],
      current: 0,
    }
  },
  onReachBottom() {
    this.getList(true)
  },
  methods: {
    changeTab(index) {
      this.current = index
      this.init()
      this.getList()
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 20,
        busy: false
      }
      this.list = []
      this.total = 0
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        materialModel.followList({
          ...this.queryList,
          id: this.id,
          type: this.current
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          this.total = data.quantity
          // console.log(this.list.map(x => x.id))
          console.log(this.list)
          uni.stopPullDownRefresh();
        }).finally(() => {
        })
      }
    },
    handleFollow(item) {
      const follow = +item.status === 1 ? 0 : 1
      item.status = follow
      const id = this.current === 0 ? item.follow_id : item.user_id
      const user_id = this.current === 0 ? item.user_id : item.follow_id
      materialModel.follow({ id, user_id, follow }).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功'
        })
      })
    },
  },
  onLoad(options) {

  },
  onHide() {
    this.init()
    this.getList()
  },
  onShow() {
    this.init()
    this.getList()
  }
}


</script>

<style lang="scss" scoped>
.tab {
  margin-bottom: 20rpx;
}

.nothing {
  //margin: 20rpx;
  background: white;
  padding: 20rpx;
  font-size: 24rpx;
  color: #cccccc;
  border-radius: 10rpx;
}
.wrapper {
  padding: 20rpx;
  background: #f3f5f7;
  .item {
    margin-bottom: 30rpx;
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    position: relative;
    display: flex;
    align-items: center;
    .follow {
      color: white;
      display: inline-block;
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      background: $main_color;
      font-size: 26rpx;
    }
    .avatar {
      padding-right: 20rpx;
    }
    .name {
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
